<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>决策树生成</title>
    <script src="js/jquery-3.2.0.min.js"></script>
    <link rel="stylesheet" href="css/bootstrap.css" >
    <link rel="stylesheet" href="css/bootstrap-theme.css" >
    <link rel="stylesheet" href="css/buttons.css">
    <script src="js/bootstrap.js" ></script>
    <script src="js/decision-tree.js"></script>
    <link href="css/tree.css" rel="stylesheet" type="text/css" />
</head>
<body>
<ul class="nav nav-pills" id="nav-list" >
    <li class="active">
        <a href="#" id="menu-prediction" >预测</a>
    </li>
    <li >
        <a href="indexData.php" id="menu-data"  >数据</a>
    </li>
</ul>
<div class="container-fluid" id="prediction">
    <div class="row-fluid">
        <div class="span6" >
            <form>
                <fieldset>
                    <legend>预测信息<div>目前已有属性：Age、Sex、Region、Income、Married、Car、Mortgage、Buy</div></legend>
                    <label>目标属性： <input type="text" id="categoryAttr"/></label><br>
                    <!--<label>忽略属性： <input type="text" id="ignoredAttributes"/></label><br>-->
                    <!--<label ><input type="checkbox" id="randomCheck" onclick="checktree()" /> 用随机森林进行预测 ? <div class="btn-group">-->
                       <!-- <button class="btn">随机森林数目</button>-->

<!--                        <button id="dropMenu" data-toggle="dropdown" class="btn btn-default dropdown-toggle" style="display:none">随机森林数  <span class="caret"></span></button>
                        <ul class="dropdown-menu">
                            <li>
                                <a href="#">3</a>
                            </li>
                            <li>
                                <a href="#">5</a>
                            </li>
                            <li>
                                <a href="#">9</a>
                            </li>
                            <li>
                                <a href="#">12</a>
                            </li>
                        </ul>-->
                    <!--</div>-->
                    <!--</label>-->
                   <!-- <label style="visibility: collapse">随机森林数<input type="text" /></label>-->

                    <br>

                    <button type="button" class="button button-glow button-border button-rounded button-primary" onclick="predict()">预测</button>

                </fieldset>
                <br>
            </form>

        </div>

        <div class="span6">
<!--            <p>
               <strong>预测样本：</strong> <br>
            <div id="testingItem"></div>
            </p>
            <hr>
            <p>
                <strong>决策树预测：</strong><br>
            <div id="decisionTreePrediction"></div>
            </p><hr>
            <p><strong>随机森林预测：</strong><br>
            <div id="randomForestPrediction"></div>
            </p>-->
            <hr>
            <div class="hero-unit">
                <h1>
                决策树结果：
                </h1>
                <div class="tree" id="displayTree"></div>
            </div>
        </div>
    </div>
</div>


</div>
<script>
    function checktree(){
        if(document.getElementById("randomCheck").checked){
            //alert("checkbox is checked");
            document.getElementById("dropMenu").style.display = "block";
        }else{
            document.getElementById("dropMenu").style.display = "none";
        }
    }
    window.onload=function(){
        var ul=document.getElementById("nav-list");
        var li=ul.getElementsByTagName("li");
        for(i=0;i<li.length;i++){

            li[i].onclick=function(){
                for(j=0;j<li.length;j++){
                    li[j].className=""
                }
                this.className="active"
            }
        }
    }
    function clickpre(){
        //alert("im pre");
        document.getElementById("prediction").style.display = "block";
        document.getElementById("data").style.display = "none";
    }
    function clickdata(){
       // alert("im data");
        document.getElementById("data").style.display = "block";
        document.getElementById("prediction").style.display = "none";
    }
    // Training set
    function predict(){

        <?php
        /**
         * Created by IntelliJ IDEA.
         * User: 34984
         * Date: 2017/3/26
         * Time: 19:18
         */
        /*
        1.在company数据user表中取出10条数据，保存为数组
        2.在将数组转化为json格式，传递给js
        3.用json解析器将传递过来的json字符串转化为json对象,
        4.用document.write输出语句打印在页面上
        */
        $conn = mysql_connect("182.254.219.244:3306","mldb","mldbtest");
        mysql_query("set names utf8");                       //设置编码
        mysql_select_db("mldb",$conn);                    //选择库

        $sql = "select * from ComputerBuy";                //在user表中查询数据
        $res = mysql_query($sql);                            //执行sql语句
        $arr = array();

        while($row = mysql_fetch_array($res,MYSQL_ASSOC)){   //查询出来sql
            $arr[] = $row;//将查询出来的结果赋给数组$arr
        }

        $str = json_encode($arr);                           //将数组转化为json格式的字符串
        mysql_close();
        ?>

        var jsonString ='<?php echo $str;?>';//传递php中的数据给js
        var data1 = JSON.parse(jsonString);

        // Configuration
        var config = {
            trainingSet: data1,
            categoryAttr: '',
            ignoredAttributes: ['id']
        };
        //alert(JSON.stringify(config));
        if(document.getElementById('categoryAttr').value!=""){
            config["categoryAttr"] = document.getElementById('categoryAttr').value.toString();
            //alert(JSON.stringify(config));
        }else{
            alert('预测信息不完整！');
            return;
        }

        // Building Decision tree.css
        var decisionTree = new dt.DecisionTree(config);

        // Building Random Forest
/*        var numberOfTrees = 3;//1-14
        var randomForest = new dt.RandomForest(config, numberOfTrees);

        // Testing Decision tree.css and Random Forest
        var comic = {Outlook: 'rain', Temperature:'mild', Humidity:'high', Windy:'FALSE'};

        var decisionTreePrediction = decisionTree.predict(comic);
        var randomForestPrediction = randomForest.predict(comic);
        // Displaying predictions
        document.getElementById('testingItem').innerHTML = JSON.stringify(comic, null, 0);
        document.getElementById('decisionTreePrediction').innerHTML = JSON.stringify(decisionTreePrediction, null, 0);
        document.getElementById('randomForestPrediction').innerHTML = JSON.stringify(randomForestPrediction, null, 0);*/

        // Displaying Decision tree.css
        document.getElementById('displayTree').innerHTML = treeToHtml(decisionTree.root);


        // Recursive (DFS) function for displaying inner structure of decision tree
        function treeToHtml(tree) {
            // only leafs containing category
            if (tree.category) {
                return  ['<ul>',
                    '<li>',
                    '<a href="#">',
                    '<b>', tree.category, '</b>',
                    '</a>',
                    '</li>',
                    '</ul>'].join('');
            }

            return  ['<ul>',
                '<li>',
                '<a href="#">',
                '<b>', tree.attribute, ' ', tree.predicateName, ' ', tree.pivot, ' ?</b>',
                '</a>',
                '<ul>',
                '<li>',
                '<a href="#">yes</a>',
                treeToHtml(tree.match),
                '</li>',
                '<li>',
                '<a href="#">no</a>',
                treeToHtml(tree.notMatch),
                '</li>',
                '</ul>',
                '</li>',
                '</ul>'].join('');
        }
    }
</script>
</body>
</html>